import React, { useState, useRef, useEffect } from 'react';
import { history, useSelector } from 'umi';
import { isEmpty } from '@/utils/common';
import styles from './Header.less';

/* 头部组件 */
interface HeaderProps {
  lgHeight?: boolean,
  hasBack?: boolean,
  onBack?: Function,
  ghost?: boolean,
  title?: string,
  children?: React.ReactNode;
  onShare?: Function,
  onSearch?: Function,
  searchHolder? :string,
  leftExtra?: string,
  searchHold?: boolean,
  border?: boolean,
  store?: boolean,
}

export default function (props: HeaderProps) {
  const {
    lgHeight = false,
    hasBack = false,
    onBack = undefined,
    ghost = false,
    title = false,
    children = false,
    onShare = ()=>{},
    onSearch,
    searchHolder = '',
    leftExtra = '',
    searchHold,
    border = true,
    store = false,
  } = props;

  const searchRef: any = useRef<HTMLInputElement>(null);


  const [searchValue, setSearchValue] = useState('');
  const [showSearch, setShowSearch] = useState(searchHold || false);
  const { routerLength } = useSelector((state:any) => state.common);

  /* 顯示搜索框 */
  const handleShowSearch = () => {
    setShowSearch(true);
    searchRef.current.focus();
  }

  /* 顯示搜索框 */
  const handleHideSearch = () => {
    if (!isEmpty(searchValue) || searchHold) return false;
    setShowSearch(false);
  }

  /* 搜索 */
  const handleSearch = (event: any) => {
    // if (isEmpty(searchValue)) return;
    // console.log(searchValue);
    onSearch && onSearch(searchValue);
    event.preventDefault();
    return false;
  }

  /* 清空 */
  const handleClearSearch = () => {
    setSearchValue('');
    onSearch && onSearch('');
    if (searchHold) return false;
    setShowSearch(false);
  }

  /* 返回 */
  const handleBack = () => {
    let braId = localStorage.getItem('BRAID');
    let codeId = localStorage.getItem('CODEID');
    if (onBack) {
      onBack();
    } else if (history.length <= routerLength && history.length < 3) {
      history.replace(`/home?braId=${braId}&codeId=${codeId}`);
    } else {
      history.goBack();
    }
  }

  let mainStyle: any = {};
  if (ghost) mainStyle['background'] = 'transparent';
  // console.log(history)

  useEffect(() => {
    if (searchHold) {
      searchRef.current.focus();
    }
  }, [])

  return (<div className={`${styles.head_wrap} ${lgHeight ? styles.lg_height : ''}`}>
    <div className={styles.head_hidden} style={mainStyle}></div>
    <div className={`${styles.head_main} ${border && styles.border} ${showSearch ? styles.active : ''} ${ghost ? '' : 'white'}  ${store ? styles.store : ''}`} style={mainStyle} >
      {leftExtra && <div className={styles.head_left_extra}>{leftExtra}</div>}
      {(hasBack && !searchHold) && <i className={`${styles.head_back}`} onClick={handleBack}>返回</i>}

      {title && <h3 className={`${styles.head_title}`}>{title}</h3>}
      {children && <div className={styles.head_middle}>{children}</div>}
      {onShare && <i className={`${styles.head_share}`} onClick={()=>onShare()}></i>}
      {onSearch && <div className={styles.search_wrap}>
        {searchHold ? (hasBack && <i className={`${styles.head_back}`} onClick={handleBack}>返回</i>) : <i className={styles.icon} onClick={handleShowSearch}></i>}
        <form className={styles.search} onSubmit={handleSearch}>
          <div className={styles.input_wrap}>
            <input
              ref={searchRef}
              className={styles.input}
              type="text"
              maxLength={30}
              placeholder={searchHolder ? searchHolder : '請輸入查詢內容'}
              value={searchValue}
              onBlur={handleHideSearch}
              onChange={e => { setSearchValue(e.target.value) }}
            />
            <i className={styles.input_clear} onClick={handleClearSearch}>清空</i>
          </div>
          <button className={styles.button} type="submit">查詢</button>
        </form>
      </div>}
    </div>
  </div>)
}